<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="plugins/vue/vue.js"></script>
    <script src="plugins/axios/axios.min.js"></script>
    <script src="plugins/util.js"></script>
</head>
<body>
<div id="app">

    <table border="1">
        <tr align="center">
            <td>ID</td>
            <td>user_id</td>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>操作</td>
        </tr>
        <tr align="center">
            <td ><input type="hidden" name="id" v-model="name.id" ></td>
            <td><select v-model="name.userId" >
                <option v-for="a in list"  :value="a.id" >
                    {{a.id}}  {{a.username}}
                </option>
            </select>
            </td>
            <td><input type="text"  v-model="name.name" ></td>
            <td><input type="number"  v-model="name.price" ></td>
            <td><input type="number"  v-model="name.num" ></td>
            <td><button type="button" @click="add()">保存</button></td>
        </tr>
    </table>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            name:{

            },
            list:[]
        },
        methods:{
            all(){
                var id=getQueryString("id")
                axios.get("/order/hx?id="+id).then(
                    res=>{
                        this.name=res.data
                    }
                )
            },
            add(){
                axios.post("/order/update",this.name).then(
                    res=>{
                        alert("保存成功")
                        location.href="index.html"
                    }
                )
            },
            xlk(){
                axios.get("/order/xlk").then(
                    res=>{
                        this.list=res.data
                    }
                )
            }

        },
        created(){
            this.all()
            this.xlk()
        }

    })
</script>
</body>
</html>